<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="Responsive Admin Dashboard Template">
        <meta name="keywords" content="admin,dashboard">
        <meta name="author" content="skcats">
		<title></title>
        <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all" />
        <link th:href="@{/assets/plugins/bootstrap/css/bootstrap.min.css}" rel="stylesheet">
        <link th:href="@{/assets/plugins/font-awesome/css/font-awesome.min.css}" rel="stylesheet">
        <link th:href="@{/assets/css/custom.css}" rel="stylesheet">
        <script th:src="@{/assets/plugins/jquery/jquery-3.1.0.min.js}"></script>
        <script th:src="@{/layui/layui.js}"></script>
	</head>
	<style>
    .utable .layui-laypage .layui-laypage-curr .layui-laypage-em {
            background-color: #1E9FFF;
    }
    .layui-table-page {
            text-align: center;
    }
    .layui-table {
        text-align: center;
        margin-top: -10px;
    }
    .layui-table-view thead th {
        text-align: center;
        font-weight: bold;
    }
    .layui-table-view tbody td {
        text-align: center;
    }
    .layui-form-select dl { max-height:200px; }
	</style>
<body>

<!--表内功能-->
    <script id="bar" type="text/html">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">
        <i class="layui-icon">&#xe640;</i>删除
    </a>
	</script>

<!--搜索狂-->
<form class="layui-form">

    <div class="layui-inline">
        <label class="layui-form-label" style="width: 100px">未打卡日期</label>
        <div class="layui-input-block">
            <input name="punchtime" type="text" autocomplete="off" class="layui-input" id="test1">
        </div>
    </div>

    <div class="layui-inline">
        <label class="layui-form-label" style="width: 100px">员工姓名</label>
        <div class="layui-input-block">
            <select id="empid" name="empid" style="height: 35px;width: 120px;" lay-filter="mySelect">
                <option value="">请选择员工</option>
                <option th:each="e:${elist}" th:value="${e.emp_id}" th:text="${e.emp_name}">张先生</option>
            </select>
        </div>
    </div>

    <div class="layui-inline">
        <label class="layui-form-label">状态</label>
        <div class="layui-input-block">
            <select id="status" name="status" style="height: 35px;width: 120px;" lay-filter="mySelect">
                <option value="">请选择状态</option>
                <option value="1">未审核</option>
                <option value="2">通过</option>
                <option value="3">不通过</option>
            </select>
        </div>
    </div>

    <div class="layui-inline">
        <button id="ck" type="button" class="btn btn-info btn-addon"><i class="fa fa-spin fa-refresh"></i> 查找</button>
    </div>

</form>

<div class="utable">
    <table class="layui-table" id="demo" lay-filter="demo"></table>
</div>

</body>
<script type="text/javascript" th:inline="none">

    layui.use('laydate', function(){
        var laydate = layui.laydate;

        //执行一个laydate实例
        laydate.render({
            elem: '#test1' //指定元素
        });
    });

    layui.use('table', function () {
        var table = layui.table;

        //方法渲染
        table.render({
            elem: '#demo'
            ,id: 'tab'
            ,height: 520
            ,width: 1250
            ,url: '/check/listdata' //数据接口
            ,page: true //开启分页
            ,toolbar: '#toolbarDemo'
            ,cols: [[ //表头
                {field: 'checkingid', title: '编号', sort: true}
                ,{field: 'emp_Name', title: '员工姓名'}
                ,{field: 'punchtime', title: '未打卡时间'}
                ,{field: 'cause', title: '原因说明'}
                ,{field: 'auditperson', title: '审核人'}
                ,{field: 'audittime', title: '审核时间'}
                ,{field: 'remark', title: '审核说明'}
                ,{field: 'status', title: '状态', templet: aaa}
                ,{fixed: 'right', title:'操作', toolbar: '#bar'}
            ]]
        });


        //模糊
        $("#ck").on('click',function(){
            var punchtime=$("#test1").val();
            var empid=$("#empid").val();
            var status=$("#status").val();
            table.reload('tab', {
                where: { //设定异步数据接口的额外参数，任意设
                    punchtime: punchtime,
                    empid:empid,
                    status:status,
                }
                ,page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
        });


        //监听行工具事件
        table.on('tool(demo)', function (obj) {
            var data = obj.data;//获取数据
            if (obj.event === 'del') {//删除
                layer.confirm('真的删除么?', function (index) {
                    obj.del();
                    layer.close(index);
                    $.ajax({
                        url: '/check/del',
                        type: 'post',
                        data: {
                            id:data.checkingid
                        },
                        dataType: 'json',
                        success:function(data){
                            if(data){
                                layer.msg(JSON.stringify("删除成功"));
                            }else {

                            }
                        },
                    })
                });
            }
        })

        //启用禁用
        function aaa(data){
            var status = data.status;
            var btns = "";
            if (status == 1) {
                btns += '<span style="color:#ed2a4a">未审核</span>';
            }
            if (status == 2) {
                return"通过";
            }
            if (status == 3) {
                btns += '<span style="color:#ed2a2a">不通过</span>';
            }
            return btns;
        }
    });
</script>
</html>